<template>
  <div v-if="recentData.length>0" class="recent-container">
    <CourseItem v-for="(item,index) in recentData" :model-value="item" :key="index"
                @click="courseItemClickListener(item)" />
  </div>
  <el-empty v-else description="暂无学习记录" />
</template>
<script setup>

import { listRecentCourse } from '@/api/tsm/course.js'
import useUserStore from '@/store/modules/user.js'
import { ref, onMounted } from 'vue'
import CourseItem from '@/views/components/CourseItem.vue'
import { useRouter } from 'vue-router'

let router = useRouter()
let userStore = useUserStore()
let queryparams = ref({
  pageNum: 1,
  pageSize: 10
})
let recentData = ref([])

onMounted(() => {
  initData()
})

function initData() {
  listRecentCourse(userStore.id, queryparams.value).then(response => {
    recentData.value = response.rows
  })
}

function courseItemClickListener(item) {
  router.push({ path: `/course/info/${item.id}` })
}
</script>

<style scoped lang="scss">
.recent-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  margin-top: 1em;


  .el-card {
    border-radius: 12px;
    background: #ffffff;
    transition: 0.5s;
  }

  .el-card:hover {
    box-shadow: 0 4px 16px 4px rgba(0, 0, 0, .04);
  }
}
</style>